@charset "utf-8";

@import '../../theme.scss';

.x-card {
  border-radius: px(20);
  background: var(--x-panel-bg-color);
  overflow: hidden;

  &__inner {
    display: flex;
  }

  &--ar {
    position: relative;

    .x-card__inner {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  &__ar {
    pointer-events: none;
    width: 100%;
  }

  &--shadow {
    box-shadow: 0 px(20) px(60) rgba(0, 0, 0, 0.1);
  }

  &--column {
    flex-direction: column;
  }

  &--column-reverse {
    flex-direction: column-reverse;
  }

  &--row {
    flex-direction: row;
  }

  &--row-reverse {
    flex-direction: row-reverse;
  }

  &--activable {
    transition: all 0.2s ease-out;

    &:active {
      transform: scale(0.99);
      opacity: 0.8;
    }
  }

  &__figure {
    position: relative;
    overflow: hidden;
    border-radius: px(4);
    flex: none;

    &--activable {
      &:active > img {
        opacity: 0.7;
      }
    }

    > img {
      display: block;
      width: 100%;
      height: 100%;
      transition: opacity 0.2s ease-out;
    }

    .x-card__figure-abs-img {
      position: absolute;
      left: 0;
      top: 0;
    }

    &-content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 9;
    }
  }
}
